<template>
    <div 
    v-for="value in dataSource"
    :key="value.cid"
    @click='handleSelect(value)'
    :class="{ 'window':true,'active':value.cid === selected}"
    v-show='value.isShow'
    @contextmenu.stop="">
        <header 
        v-windowDrag 
        class="w-header"
        :data-flag="0"
        @dblclick='handleZoom(value)'>
            <div class="full-w full-h flex-between above-box">
                <div style="flex-basis: 85%;display: flex; justify-content: flex-start;align-items: center;">

                    <div class="left-icon">
                        <img :src="value.icon">
                    </div>

                    <div class="tab-h">
                        <div 
                        v-for="val in value.page"
                        :key="val.pageId"
                        class="pointer"
                        :class="{'tab':true,'tab-active':currentPage[val.cid]===val.pageId}"
                        @click='handleChangeTab(val)'
                        >
                            <span class="oneline" style="font-size:14px;margin-bottom: 1px;">
                                {{val.url}}
                            </span>
                            
                            <el-icon @click.stop='handleCloseTab(value,val)' 
                            style="margin-left: 5px;font-size: 13px;"><close /></el-icon>

                        </div>
                        <div style="flex-basis: 5%;" class="add-panel">
                            <el-icon :size="25" color='#545353' @click='handleAddTab(value)'><circle-plus /></el-icon>
                        </div>
                    </div>

                </div>
            
                <div style="flex-basis: 15%; display: flex; justify-content: flex-end;">

                    <div class="right-panel" style="flex-basis: 5%; min-width: 110px;">
                        <el-icon @click='hideWindow(value)'><minus /></el-icon>
                        <el-icon @click='handleZoom(value)'><copy-document /></el-icon>
                        <el-icon @click='handleClose(value)'><close /></el-icon>
                    </div>

                </div>
                
            </div>

            <div class="full-w full-h">

                <div class="full-w full-h flex-between below-box"
                v-for="val in value.page"
                :key="val.pageId"
                v-show="currentPage[val.cid]===val.pageId">

                    <div class="right-panel" style="margin-right: 10px; flex-basis: 5%; min-width: 110px;">
                        <el-icon :size="25" @click="handlePageHistory('back',value,val)"><back /></el-icon>
                        <el-icon :size="25" @click="handlePageHistory('go',value,val)"><right /></el-icon>
                        <el-icon @click='handleRefresh(value,val)' :size="25"><refresh-right/></el-icon>
                    </div>

                    <div style="flex-basis:100%">
                        <el-input v-model="searchValue[val.pageId]" placeholder="" @change='((val)=>{searchUrl(val,value)} )'>
                            <template #prefix>
                                <el-icon class="el-input__icon"><lock /></el-icon>
                            </template>
                        </el-input>
                    </div>
                    
                    <div class="right-panel" style="flex-basis: 5%; min-width: 75px;">
                        <el-icon  color='#a6a6a6' :size="25"><user-filled /></el-icon>
                        <el-icon  color='#a6a6a6' :size="25"><more-filled/></el-icon>
                    </div>

                </div>

            </div>
            
        </header>
        <div style="padding: 0px 6px 6px;height: 100%;">
            <div 
            id="iframeParent"
            class="full-layout" 
            style="padding-top: 2px;"
            v-for="val in value.page"
            :key="val.pageId"
            v-show="currentPage[val.cid]===val.pageId"
            v-load="loading">
                <iframe 
                target="_self"
                id="iframe"
                :src="val.url"
                :key="val.reload"
                :name='val.title' 
                frameborder='0'
                @load="iframeLoad"
                scrolling='yes'>
                </iframe>
                <div style="height: 100%; width: 100%; display: none; position: absolute;"></div>
            </div> 
        </div>

    </div>
</template>

<script>
import { reactive,toRefs,onMounted,getCurrentInstance } from 'vue'
export default {
  name: 'Edge',
  components: {  },
  props: {
    dataSource:{
        type:Array,
        default:null
    },
    selected:{
        type:String,
        default:''
    },
    searchValue:{
        type:Object,
        default:null
    },
    currentPage:{
        type:Object,
        default:null
    },
    loading:{
        type:Boolean,
        default:true
    }
  },
  emits: ['select','zoom','hide',
  'close','changeTab','closeTab','addTab','history','refresh','search','load'],
  setup(props,context) {
      const {proxy} = getCurrentInstance();
      let methods = reactive({
        handleSelect(value){
            context.emit('select',value)
        },
        handleZoom(value){
            context.emit('zoom',value)
        },
        hideWindow(value){
            context.emit('hide',value)
        },
        handleClose(value){
            context.emit('close',value)
        },
        handleChangeTab(value){
            context.emit('changeTab',value)
        },
        handleCloseTab(value1,value2){
            context.emit('closeTab',value1,value2)
        },
        handleAddTab(value){
            context.emit('addTab',value)
        },
        handlePageHistory(value1,value2,value3){
            context.emit('history',value1,value2,value3)
        },
        handleRefresh(value1,value2){
            context.emit('refresh',value1,value2)
        },
        searchUrl(value1,value2){
            context.emit('search',value1,value2)
        },
        iframeLoad(){
            context.emit('load')
        }
        
      })

      onMounted(() => {
          window.addEventListener('message', function(e){    // 主页⾯监听message事件,
                var data = e.data;
                console.log(data);
                proxy.$http.saveData(proxy,data).then(res=>{
                    console.log(res);
                }).catch(err=>{
                    console.log(err);
                })
            }, false);
      })
      return {
          ...toRefs(methods)
      }
  }
}

</script>
<style lang='scss' scoped>
.window {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 5px;
    z-index: 10;
    background-color: $white;
    overflow: hidden;
    box-shadow: 0px 0px 1px 2px #eeeeee;

    .w-header {
        padding: 2px;
        // width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0px -2px 8px 7px #fff;
        margin: 5px;

        .left-icon {
            height: 20px;
            width: 20px;
            min-width: 20px;
        }

        .right-panel {
            margin-left: 10px;
            height: 100%;

            i {
                padding: 5px;
                height: 100%;
                width: 30px;
                margin: 0 3px;
                background-color: transparent;
                border-radius: 3px;
                transition: all .2s;
                cursor: pointer;

                &:hover {
                    background-color: rgba(201, 201, 201, 0.4);
                }
            }
        }

    }
    &:deep(.el-loading-mask) {
        top: 70px;
    }

}



.above-box {
    margin-bottom: 5px;
    justify-content:flex-start;
    height: 33px;
}

.below-box {
    justify-content:flex-start;

    &:deep(.el-input__inner) {
        border-radius: 30px;
    }
}


.full-layout {
    height: calc(100% - 80px);
    position: relative;
}

.full-layout-1 {
    height: calc(100% - 40px);
    position: relative;
}

.active {
    z-index: 2000 !important;
}

#iframe {
    position: absolute;
    height: 100%;
    width: 100%;
}

.tab-h {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tab {
    height: 20px;
    display: flex;
    align-items: center;
    padding: 15px;
    text-align: left;
    max-width: 170px;
    margin-left: 10px;
    border-radius: 5px;
    background-color: rgba(233, 224, 224, 0.4);

    &:hover {
        background-color: rgba(233, 224, 224, 1);
    }
}

.tab-active {
    background-color: rgba(223, 223, 223, 0.8);
}


.add-panel {
    height: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;

    i {
        padding: 5px;
        width: 30px;
        margin: 0 3px;
        background-color: transparent;
        border-radius: 60px;
        transition: all .2s;
        cursor: pointer;

        &:hover {
            transform: scale(1.1);
            background-color: rgba(201, 201, 201, 0.4);
        }
    }
}


</style>
